<template>
  <div class="min-h-screen bg-gray-50 ">
    <div class="max-w-6xl mx-auto px-4 py-6">
      <!-- Header -->
      <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900  mb-1">Settings</h1>
        <p class="text-sm text-gray-600 ">
          Manage your account settings and preferences
        </p>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <!-- Settings Navigation -->
        <div class="lg:col-span-1">
          <div class="bg-white  rounded-lg border border-gray-200  p-4">
            <nav class="space-y-1">
              <button 
                v-for="tab in tabs" 
                :key="tab.id"
                @click="activeTab = tab.id"
                :class="[
                  'w-full text-left px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200',
                  activeTab === tab.id
                    ? 'bg-blue-50  text-blue-600 '
                    : 'text-gray-600  hover:text-gray-900  hover:bg-gray-50 '
                ]"
              >
                <div class="flex items-center space-x-2">
                  <component :is="tab.icon" class="w-4 h-4" />
                  <span>{{ tab.name }}</span>
                </div>
              </button>
            </nav>
          </div>
        </div>

        <!-- Settings Content -->
        <div class="lg:col-span-3">
          <!-- Profile Settings -->
          <div v-if="activeTab === 'profile'" class="bg-white  rounded-lg border border-gray-200  p-6">
            <h2 class="text-lg font-semibold text-gray-900  mb-4">Profile</h2>
            
            <div class="space-y-4">
              <!-- Avatar -->
              <div class="flex items-center space-x-4">
                <div class="w-16 h-16 rounded-full overflow-hidden">
                  <img 
                    v-if="authStore.user?.avatar" 
                    :src="authStore.user.avatar" 
                    :alt="userDisplayName"
                    class="w-full h-full object-cover"
                  />
                  <div v-else class="w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                    <span class="text-xl font-medium text-white">
                      {{ userDisplayName.charAt(0).toUpperCase() }}
                    </span>
                  </div>
                </div>
                <div>
                  <button class="px-3 py-1.5 text-sm font-medium text-blue-600  hover:text-blue-700  border border-blue-200  rounded hover:bg-blue-50  transition-all duration-200">
                    Change Avatar
                  </button>
                  <p class="text-xs text-gray-500  mt-1">JPG, PNG up to 2MB</p>
                </div>
              </div>

              <!-- Form Fields -->
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700  mb-1">Name</label>
                  <input 
                    v-model="profileForm.name"
                    type="text" 
                    class="w-full px-3 py-2 border border-gray-300  rounded-lg bg-white  text-gray-900  focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all duration-200 text-sm"
                    placeholder="Enter your name"
                  />
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700  mb-1">Email</label>
                  <input 
                    v-model="profileForm.email"
                    type="email" 
                    class="w-full px-3 py-2 border border-gray-300  rounded-lg bg-white  text-gray-900  focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all duration-200 text-sm"
                    placeholder="Enter your email"
                  />
                </div>
              </div>

              <div class="flex justify-end">
                <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 font-medium text-sm">
                  Save Changes
                </button>
              </div>
            </div>
          </div>


          <!-- Subscription Settings -->
          <div v-if="activeTab === 'subscription'" class="bg-white  rounded-lg border border-gray-200  p-6">
            <h2 class="text-lg font-semibold text-gray-900  mb-4">Subscription</h2>
            
            <div class="space-y-4">
              <!-- Current Plan -->
              <div class="bg-gradient-to-r from-blue-50 to-purple-50   rounded-lg p-4">
                <div class="flex items-center justify-between">
                  <div>
                    <h3 class="text-lg font-semibold text-gray-900 ">{{ getCurrentPlanName() }}</h3>
                    <p class="text-sm text-gray-600  mt-1">
                      {{ userSubscription?.expiresAt ? `Valid until ${formatDate(userSubscription.expiresAt)}` : 'Lifetime access' }}
                    </p>
                  </div>
                  <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800  ">
                    Current Plan
                  </span>
                </div>
              </div>

              <!-- Plan Features -->
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div 
                  v-for="plan in subscriptionPlans" 
                  :key="plan.id"
                    :class="[
                      'border rounded-lg p-4 transition-all duration-200',
                      plan.id === userSubscription?.plan
                        ? 'border-blue-500 bg-blue-50 '
                        : 'border-gray-200  hover:border-gray-300 '
                    ]"
                >
                  <div class="text-center">
                    <h4 class="text-sm font-semibold text-gray-900 ">{{ plan.name }}</h4>
                    <p class="text-2xl font-bold text-gray-900  mt-1">${{ plan.price }}</p>
                    <p class="text-xs text-gray-600 ">{{ plan.period }}</p>
                  </div>
                  
                  <ul class="mt-4 space-y-2">
                    <li v-for="feature in plan.features" :key="feature" class="flex items-center text-xs text-gray-600 ">
                      <svg class="w-3 h-3 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                      </svg>
                      {{ feature }}
                    </li>
                  </ul>
                  
                  <button 
                    v-if="plan.id !== userSubscription?.plan"
                    class="w-full mt-4 px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 font-medium text-sm"
                  >
                    Upgrade
                  </button>
                  <div v-else class="w-full mt-4 px-3 py-2 bg-gray-100  text-gray-500  rounded-lg text-center font-medium text-sm">
                    Current Plan
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Security Settings -->
          <div v-if="activeTab === 'security'" class="bg-white  rounded-lg border border-gray-200  p-6">
            <h2 class="text-lg font-semibold text-gray-900  mb-4">Security</h2>
            
            <div class="space-y-4">
              <!-- Change Password -->
              <div>
                <h3 class="text-sm font-medium text-gray-900  mb-3">Change Password</h3>
                <div class="space-y-3">
                  <div>
                    <label class="block text-sm font-medium text-gray-700  mb-1">Current Password</label>
                    <input 
                      v-model="securityForm.currentPassword"
                      type="password" 
                      class="w-full px-3 py-2 border border-gray-300  rounded-lg bg-white  text-gray-900  focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all duration-200 text-sm"
                      placeholder="Enter current password"
                    />
                  </div>
                  <div>
                    <label class="block text-sm font-medium text-gray-700  mb-1">New Password</label>
                    <input 
                      v-model="securityForm.newPassword"
                      type="password" 
                      class="w-full px-3 py-2 border border-gray-300  rounded-lg bg-white  text-gray-900  focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all duration-200 text-sm"
                      placeholder="Enter new password"
                    />
                  </div>
                  <div>
                    <label class="block text-sm font-medium text-gray-700  mb-1">Confirm New Password</label>
                    <input 
                      v-model="securityForm.confirmPassword"
                      type="password" 
                      class="w-full px-3 py-2 border border-gray-300  rounded-lg bg-white  text-gray-900  focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all duration-200 text-sm"
                      placeholder="Confirm new password"
                    />
                  </div>
                  <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 font-medium text-sm">
                    Update Password
                  </button>
                </div>
              </div>

              <!-- Two-Factor Authentication -->
              <div class="border-t border-gray-200  pt-4">
                <h3 class="text-sm font-medium text-gray-900  mb-2">Two-Factor Authentication</h3>
                <div class="flex items-center justify-between">
                  <div>
                    <p class="text-sm text-gray-600 ">Add an extra layer of security to your account</p>
                  </div>
                  <button class="px-3 py-1.5 border border-gray-300  text-gray-700  rounded hover:bg-gray-50  transition-colors duration-200 font-medium text-sm">
                    Enable
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed } from 'vue'
  import { useAuthStore } from '../stores/auth'

  const authStore = useAuthStore()

  // State
  const activeTab = ref('profile')

  // Computed
  const userDisplayName = computed(() => authStore.userDisplayName)
  const userSubscription = computed(() => authStore.user?.subscription)

  // Form data
  const profileForm = reactive({
    name: authStore.user?.name || '',
    email: authStore.user?.email || ''
  })


  const securityForm = reactive({
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  })

  // Tabs configuration
  const tabs = [
    {
      id: 'profile',
      name: 'Profile',
      icon: 'svg'
    },
    {
      id: 'subscription',
      name: 'Subscription',
      icon: 'svg'
    },
    {
      id: 'security',
      name: 'Security',
      icon: 'svg'
    }
  ]


  // Subscription plans
  const subscriptionPlans = [
    {
      id: 'free',
      name: 'Free',
      price: '0',
      period: 'Forever',
      features: [
        'Up to 3 Agents',
        'Up to 1 Team',
        'Basic Support',
        'Community Forum'
      ]
    },
    {
      id: 'pro',
      name: 'Pro',
      price: '29',
      period: 'per month',
      features: [
        'Unlimited Agents',
        'Unlimited Teams',
        'Priority Support',
        'Advanced Analytics',
        'API Access'
      ]
    },
    {
      id: 'enterprise',
      name: 'Enterprise',
      price: '99',
      period: 'per month',
      features: [
        'All Pro Features',
        'Dedicated Manager',
        'Custom Integrations',
        'SLA Guarantee',
        'Private Deployment'
      ]
    }
  ]

  // Methods
  const getCurrentPlanName = () => {
    const plan = subscriptionPlans.find(p => p.id === userSubscription.value?.plan)
    return plan?.name || 'Free'
  }

  const formatDate = (date: Date | string) => {
    const dateObj = typeof date === 'string' ? new Date(date) : date
    return dateObj.toLocaleDateString('en-US')
  }
</script>